<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head/>
    <h:body>
        <h:form id="form">
            <p:treeTable value="#{treeTableBean.root}" var="document">
                <f:facet name="header">
                    Document Viewer
                </f:facet>
                <p:column headerText="Name">
                    <h:outputText value="#{document.name}" />
                </p:column>
                <p:column headerText="Size">
                    <h:outputText value="#{document.size}" />
                </p:column>
                <p:column headerText="Type">
                    <h:outputText value="#{document.type}" />
                </p:column>
                <p:column style="width:24px">
                    <p:commandLink update=":form:documentPanel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search">
                        <f:setPropertyActionListener value="#{document}" target="#{treeTableBean.selectedDocument}" />
                    </p:commandLink>
                </p:column>
            </p:treeTable>

            <p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true" resizable="false">
                <p:outputPanel id="documentPanel">
                    <p:panelGrid  columns="2" columnClasses="label,value" rendered="#{not empty treeTableBean.selectedDocument}">
                        <h:outputLabel for="name" value="Name: " />
                        <h:outputText id="name" value="#{treeTableBean.selectedDocument.name}" style="font-weight:bold" />

                        <h:outputLabel for="size" value="Size: " />
                        <h:outputText id="size" value="#{treeTableBean.selectedDocument.size}" style="font-weight:bold" />

                        <h:outputLabel for="type" value="Type " />
                        <h:outputText id="type" value="#{treeTableBean.selectedDocument.type}" style="font-weight:bold" />
                    </p:panelGrid>
                </p:outputPanel>
            </p:dialog>
        </h:form>
    </h:body>
</html>
